<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>
    <!-- 
    data 与 el 的两种写法

    1.  el 两种写法
        1. new Vue 时候配置 ul 属性
        2. 先创建 Vue 实例，随后在通过 vm.$mount('#app') 执行 el 的值
    2. data 有两种写法
        1. 对象式
        2. 函数式
    如何选择 ： 目前那种都可以，学习到组件时， data 必须写函数式， 否则会报错
    3. 一个重要的原则
       有 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数,  this 就不再是 Vue 实例了



     -->
    <div id='app'>

    </div>
</body>
<script>

    // el 的 两种写法
    let vm = new Vue({
        // el: '#app',  // 第一种写法
        data: {
            name: 'fyk'
        },
    });
    console.log(vm);

    vm.$mount('#app')   // 第二种方法


</script>

</html>